<template>
  <div :class="prefixCls">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)">
    </quill-editor>
    <a-upload
      class="quill-upload"
      :action="url"
      name="file"
      :beforeUpload="beforeUpload"
      @change="uploadAttachment"
    >
      <a-button id="upBtn"> <a-icon type="upload" /> Upload </a-button>
    </a-upload>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { UPLOAD_URL } from '@/const/const'
// import Quill from 'quill'
// import ImageResize from 'quill-image-resize-module'
// Quill.register('modules/imageResize', ImageResize)
const toolOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{ header: 1 }, { header: 2 }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ script: 'sub' }, { script: 'super' }],
  [{ indent: '-1' }, { indent: '+1' }],
  [{ direction: 'rtl' }],
  [{ size: ['small', false, 'large', 'huge'] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }],
  [{ font: [] }],
  [{ align: [] }],
  ['clean'],
  ['link', 'image', 'video'],
  [{ lineheight: ['initial', '1', '1.5', '1.75', '2', '3', '4', '5'] }]
]

export default {
  name: 'QuillEditor',
  components: {
    quillEditor
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-editor-quill'
    },
    // 表单校验用字段
    // eslint-disable-next-line
    value: {
      type: String
    }
  },
  data () {
    return {
      content: null,
      editorOption: {
        // some quill options
        placeholder: '',
        theme: 'snow', // or 'bubble'
        modules: {
          toolbar: {
            container: toolOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  // 绑定上传图片按钮
                  document.querySelector('#upBtn').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      },
      url: process.env.VUE_APP_API_BASE_URL + UPLOAD_URL
    }
  },
  methods: {
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady (quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange ({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      // this.$emit('change', html)
      this.$emit('input', html)
    },
    async beforeUpload (file) {
      // const isJpgOrPng =
      //   file.type === 'image/jpeg' ||
      //   file.type === 'image/png' ||
      //   file.type === 'image/img' ||
      //   file.type === 'image/jpg'
      // if (!isJpgOrPng) {
      //   this.$message.error('You can only upload JPG file!')
      // }
      // const isLt2M = file.size / 1024 / 1024 < 2
      // if (!isLt2M) {
      //   this.$message.error('Image must smaller than 2MB!')
      // }
      // // await this.isSize(file, 345, 150);
      // return isJpgOrPng && isLt2M
    },
    uploadAttachment (response, file, fileList) {
      // 保存文件信息
      // 获取富文本组件实例
      if (response.file.status === 'done') {
        console.log(response)
        const quill = this.$refs.myQuillEditor.quill
        // 获取光标所在位置
        const length = quill.getSelection().index
        // 插入图片  需要替换为自己服务器返回的图片地址
        const imgPath = response.file.response.data
        quill.insertEmbed(length, 'image', imgPath)
        quill.setSelection(length + 1)
        // 清空文件列表
      }
    },
  },
  watch: {
    value (val) {
      this.content = val
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../index.less');

/* 覆盖 quill 默认边框圆角为 ant 默认圆角，用于统一 ant 组件风格 */
.ant-editor-quill {
  /deep/ .ql-toolbar.ql-snow {
    border-radius: @border-radius-base @border-radius-base 0 0;
  }
  /deep/ .ql-container.ql-snow {
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }
}
/deep/ .ql-editor{
  min-height: 300px;
}
.quill-upload{
  display: none;
}
</style>
